<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1 {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

			.p2 {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

			.p2 li a {
				display: block;
				width: 60px;
				background-color: #DDDDDD;
			}

			.p3 {
				list-style-type: none;
				margin: 0;
				padding: 0;
				width: 200px;
				background-color: #f1f1f1;
				margin-bottom: 20px;
			}

			.p3 li a {
				display: block;
				color: #000;
				padding: 8px 16px;
				text-decoration: none;
			}

			.p3 li a:hover:not(.active) {
				background-color: #555;
				color: white;
			}

			.active {
				background-color: #4CAF50;
				color: #ffffff !important;
			}

			.p3 li {
				text-align: center;
				border: 1px solid #555;
				border-bottom: none;
			}

			.p3 li:last-child {
				border-bottom: 1px solid #555;
			}
			
			#div1{
				height: 100vh;
				overflow: scroll;
				
			}

			.p4 {
				list-style-type: none;
				margin: 0;
				padding: 0;
				width: 25%;
				height: 100%;
				background-color: #f1f1f1;
				float: left;
				position: fixed;
			}

			.p4 li a {
				display: block;
				color: #000;
				padding: 8px 16px;
				text-decoration: none;
			}

			.p4 li a:hover:not(.active) {
				background-color: #555;
				color: white;
			}

			.active {
				background-color: #4CAF50;
				color: #ffffff !important;
			}

			.p4 li {
				text-align: center;
				border: 1px solid #555;
				border-bottom: none;
			}

			.p4 li:last-child {
				border-bottom: 1px solid #555;
			}
			
			.ner{
				width: calc(75% - 32px);
				display: inline-block;
				float: right;
				padding: 1px 16px;
				height: 3000px;
			}
			
			body{
				margin: 0;
			}
		</style>
	</head>
	<body>
		<ul class="p1">
			<li><a href="javaScript:void(0);">主页</a></li>
			<li><a href="javaScript:void(0);">新闻</a></li>
			<li><a href="javaScript:void(0);">联系</a></li>
			<li><a href="javaScript:void(0);">关于</a></li>
		</ul>
		<!--垂直导航栏-->
		<ul class="p2">
			<li><a href="javaScript:void(0);">主页</a></li>
			<li><a href="javaScript:void(0);">新闻</a></li>
			<li><a href="javaScript:void(0);">联系</a></li>
			<li><a href="javaScript:void(0);">关于</a></li>
		</ul>
		<!--垂直导航条实例-->
		<ul class="p3">
			<li><a class="active" href="javaScript:void(0);">主页</a></li>
			<li><a href="javaScript:void(0);">新闻</a></li>
			<li><a href="javaScript:void(0);">联系</a></li>
			<li><a href="javaScript:void(0);">关于</a></li>
		</ul>

		<!--全屏高度的固定导航条-->
		<div id="div1">
			<ul class="p4">
				<li><a class="active" href="javaScript:void(0);">主页</a></li>
				<li><a href="javaScript:void(0);">新闻</a></li>
				<li><a href="javaScript:void(0);">联系</a></li>
				<li><a href="javaScript:void(0);">关于</a></li>
			</ul>
			<div class="ner">
				 <h2>Fixed Full-height Side Nav</h2>
				  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
				  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
				  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
				  <p>Some text..</p>
				  <p>Some text..</p>
				  <p>Some text..</p>
				  <p>Some text..</p>
				  <p>Some text..</p>
				  <p>Some text..</p>
				  <p>Some text..</p>
			</div>
		</div>

	</body>
</html>